﻿@{ ViewBag.Title = "jQuery UI Progressbar in ASP.NET MVC"; }
<button id="operation">Operation</button>
<div id="progressbar" style="width:500px"></div>
@section JavaScript {
    <script type="text/javascript">
        $.updateProgressbar = function () {
            //Getting current operation progress
            $.get('@Url.Action("OperationProgress")', function (data) {
                //Updating progress
                $("#progressbar").progressbar('value', data.progress);
                //If operation is complete
                if (data.progress == 100) {
                    //Enable button
                    $("#operation").attr('disabled', '');
                }
                //If not
                else {
                    //Reset timer
                    setTimeout($.updateProgressbar, 500);
                }
            });
        };

        $(document).ready(function () {
            //Progressbar initialization
            $("#progressbar").progressbar({ value: 0 });
            //Button click event
            $("#operation").click(function (e) {
                //Disabling button
                $("#operation").attr('disabled', 'disabled');
                //Making sure that progress indicate 0
                $("#progressbar").progressbar('value', 0);
                //Perform POST for triggering long running operation
                $.post('@Url.Action("Operation")', function (data) {
                    //Updating progress
                    $("#progressbar").progressbar('value', data.progress);
                    //Setting the timer
                    setTimeout($.updateProgressbar, 500);
                });
            });
        });
    </script>
}

